<!--
 * @Version: 1.0
 * @Autor:
 * @Date: 2021-03-10 16:57:07
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-27 12:56:03
 * @Description:
-->
<template>
  <el-card class="app-container content_box" shadow="always">
    <div>
      <!-- title -->
      <!-- <div class="header_title_box">
        <h2>仓储台阶费规则设置</h2>
      </div> -->
      <!-- <div class="select_form_box">
        <div class="filter-container">
          <el-input
            v-model="queryParam[select]"
            size="small"
            placeholder="请输入内容"
            class="input-with-select mr16"
            @keyup.enter.native="handleSearch"
          >
            <el-select slot="prepend" v-model="select" class="select" clearable placeholder="请选择">
              <el-option label="模板名称" value="name" />
              <el-option label="客户名称" value="company_name" />
            </el-select>
          </el-input>
          <el-select v-model="queryParam.status" size="small" placeholder="请选择状态" class="input-with-select mr16" clearable @change="handleSearch">
            <el-option v-for="(item, index) in option" :key="index" :value="item.value" :label="item.label" />
          </el-select>
        </div>
      </div> -->
      <form-selections :is-active="isActive" :items="formItems" :query-param.sync="queryParam" display="block" @handleSearch="handleSearch" />
      <div class="select_flex">
        <div class="operation_button_box">
          <el-button v-action="'storageFeeConfig@save'" icon="el-icon-circle-plus" size="small" type="success" @click="handleCreateNew()">新增仓储台阶费模板</el-button>
          <el-button v-action="'storageFeeConfig@disable'" :disabled="selectedIds.length?false:true" size="small" type="danger" @click="handleDisable()">禁用</el-button>
          <el-button v-action="'storageFeeConfig@enable'" :disabled="selectedIds.length?false:true" size="small" type="primary" @click="handleEnable()">启用</el-button>
        </div>
        <div>
          <el-button size="small" type="primary" class="filter-item search" icon="el-icon-search" @click="handleSearch">
            搜索
          </el-button>
          <el-button size="small" icon="el-icon-refresh" @click="handleRefresh">重置</el-button>
        </div>
      </div>
      <div v-loading="loading">
        <el-table ref="multipleTable" :data="data" tooltip-effect="dark" style="width: 100%" :max-height="screenHeigh" border fit @selection-change="handleSelectMulti">
          <el-table-column align="center" type="selection" width="55" />
          <el-table-column label="操作" align="center" fixed width="200px">
            <template slot-scope="scope">
              <span v-if="scope.row.is_status===2" v-action="'storageFeeConfig@update'" class="edit_style" @click="handleUpdateNew(scope.row)">编辑</span>
              <span v-if="scope.row.is_status===2" v-action="'storageFeeConfig@delete'" class="delete_style" @click="handleDelete(scope.row.id)">删除</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="模板名称" prop="name">
            <template slot-scope="scope">
              <span class="blue pointer" @click="handleUpdateNew(scope.row, 'info')">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="客户名称" prop="company_name" show-overflow-tooltip />
          <el-table-column align="center" prop="is_status" label="状态">
            <template slot-scope="scope">
              {{ scope.row.is_status===1?'启用':'禁用' }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="creator_name" label="创建人" />
          <el-table-column align="center" prop="created_at" label="创建时间" width="165" />
          <el-table-column align="center" prop="update_name" label="修改人">
            <template slot-scope="scope">
              {{ scope.row.update_name?scope.row.update_name:'-' }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="updated_at" label="更新时间" width="165" />
        </el-table>
        <el-pagination v-if="paginate.total > 0" class="pagination_box" background :current-page="paginate.current" :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
      <!-------- 回到顶部 ------------>
      <el-backtop :visibility-height="60">
        <i class="el-icon-caret-top" />
      </el-backtop>
    </div>
  </el-card>

</template>

<script>
import formOperate from '@/layout/mixin/formOperate'
import {
  action
} from '@/directive/permission/index.js' // 权限判断指令
import cacheList from '@/layout/mixin/cacheList'
export default {
  name: 'BasicStorageFeeConfig',
  directives: {
    action
  },
  mixins: [formOperate, cacheList],
  data() {
    return {
      otherHeight: 365,
      componentName: 'BasicStorageFeeConfig',
      url: '/storageFeeConfig',
      queryParam: {
        status: '',
        name: '',
        company_name: ''
      },
      searchCompany: 1,
      formItems: [
        {
          label: '模板名称',
          key: 'name',
          type: 'input',
          placeholder: '请输入模板名称'
        },
        // {
        //   label: '客户名称',
        //   key: 'company_name',
        //   type: 'input',
        //   placeholder: '请输入客户名称'
        // },
        // searchCompany
        {
          label: '客户',
          key: 'company_id',
          type: 'select',
          placeholder: '请选择客户',
          options: []
        },
        {
          label: '状态',
          key: 'status',
          type: 'select',
          placeholder: '请选择状态',
          options: [{
            value: 2,
            label: '禁用'
          },
          {
            value: 1,
            label: '启用'
          }
          ]
        }
      ],
      formFieldsData: {},
      select: 'name',
      //   defaultQueryParam: ['type'],
      option: [{
        value: 2,
        label: '禁用'
      },
      {
        value: 1,
        label: '启用'
      }
      ],
      optionCompany: [],
      loading: false,
      cachePaths: [
        '/basics/storageFeeConfigAdd' // 新增
      ]
    }
  },
  methods: {
    // 禁用启用前判断
    beforeDisable() {
      const vm = this
      const list = []
      vm.data.map((arr) => {
        if (vm.selectedIds.includes(arr.id)) {
          list.push(arr.company_id)
        }
      })
      if (vm.isRepeat(list)) {
        this.$confirm('一个客户只能同时操作一条数据，请检查选择数据!!!', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return false
        }).catch(() => { })
      } else {
        return true
      }
    },
    // 判断书否有重复元素
    isRepeat(arr) {
      var hash = {}
      for (var i in arr) {
        if (hash[arr[i]]) {
          return true
        }
        hash[arr[i]] = true
      }
      return false
    },
    handleCreateNew() {
      this.$router.push({ path: '/basics/storageFeeConfigAdd' })
    },
    // 编辑
    handleUpdateNew(data, type) {
      this.$router.push({ path: '/basics/storageFeeConfigAdd', query: { title: type === 'info' ? '仓储台阶费详情' : '编辑仓储台阶费', id: data.id, type: type } })
    }
  }
}

</script>

<style lang="scss" scoped>
</style>
